<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>登录网关</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				height: 100%;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
			}

			.login {
				width: 400px;
				height: 320px;
				background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
				border-radius: 8px;
				padding: 20px;
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
			}

			.login h1 {
				height: 50px;
				width: 100%;
				background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
				line-height: 50px;
				font-size: 24px;
				text-align: center;
				border-radius: 5px;
				margin: 0 auto 20px;
			}

			.login-form {
				width: 60%;
				margin: 0 auto;
			}

			.login-form form input {
				width: 100%;
				height: 36px;
				outline: none;
				margin: 10px 0;
				border-radius: 5px;
				display: block;
				padding: 0 8px;
				border: 1px solid #ddd;
			}

			.button {
				line-height: 36px;
				height: 36px;
				width: 100%;
				color: #ffffff;
				background-color: #4a8cf7;
				font-size: 16px;
				font-weight: normal;
				font-family: Arial;
				border: none;
				border-radius: 3px;
				text-align: center;
				display: inline-block;
				text-decoration: none;
				cursor: pointer;
				transition: background-color 0.3s;
				margin-top: 15px;
			}

			.button:hover {
				background-color: #446bf7;
			}

			.footer {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 50px;
				font-size: 12px;
				text-align: center;
				font-family: "宋体";
				line-height: 25px;
				color: #666;
			}
			
			.error-message {
				color: #ff4444;
				font-size: 12px;
				text-align: center;
				margin: 5px 0;
				height: 16px;
				min-height: 16px;
			}

			.loading {
				color: #ffffff;
				font-size: 12px;
				text-align: center;
				margin: 5px 0;
				height: 16px;
				display: none;
			}
		</style>
		<script>
			// 页面加载完成后执行
			document.addEventListener('DOMContentLoaded', function() {
				// 获取表单和输入元素
				const form = document.querySelector('form');
				const usernameInput = document.getElementById('usr');
				const passwordInput = document.getElementById('pwd');
				
				// 创建并添加错误信息和加载指示器元素
				const errorElement = document.createElement('div');
				errorElement.className = 'error-message';
				
				const loadingElement = document.createElement('div');
				loadingElement.className = 'loading';
				loadingElement.textContent = '登录中...';
				
				form.appendChild(errorElement);
				form.appendChild(loadingElement);
				
				// 处理表单提交
				form.addEventListener('submit', function(e) {
					// 阻止表单默认提交行为
					e.preventDefault();
					
					// 获取用户输入
					const username = usernameInput.value.trim();
					const password = passwordInput.value.trim();
					
					// 简单验证
					if (!username) {
						errorElement.textContent = '请输入用户名';
						return;
					}
					if (!password) {
						errorElement.textContent = '请输入密码';
						return;
					}
					
					// 清除错误信息，显示加载状态
					errorElement.textContent = '';
					loadingElement.style.display = 'block';
					
					// 构建请求数据：username=xxx&password=xxx
					const requestData = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;
					
					// 创建并发送POST请求
					const xhr = new XMLHttpRequest();
					xhr.open('POST', '/login1.html', true);
					
					// 设置请求头，指定内容类型为表单数据
					xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
					
					// 处理响应
					xhr.onload = function() {
						loadingElement.style.display = 'none';
						
						if (xhr.status >= 200 && xhr.status < 300) {
							// 登录成功，显示提示并延迟跳转（提升用户体验）
							errorElement.textContent = '登录成功，正在跳转至首页...';
							errorElement.style.color = '#00cc00'; // 成功信息用绿色
							
							// 延迟800毫秒跳转，让用户看到成功提示
							setTimeout(() => {
								// 跳转到index.html（使用绝对路径确保准确性）
								window.location.href = '/index.html';
							}, 800);
						} 
						
						else {
							// 请求失败
							errorElement.textContent = '登录失败，请检查用户名和密码';
						}
					};
					
					// 处理网络错误
					xhr.onerror = function() {
						loadingElement.style.display = 'none';
						errorElement.textContent = '网络错误，请稍后重试';
					};
					
					// 发送请求
					xhr.send(requestData);
				});
			});
		</script>
	</head>
	<body>
		<div class="login">
			<h1>隧道环境监控养护系统</h1>
			<div class="login-form">
				<form method="post">
					<input type="text" name="username" id="usr" value="" placeholder="请输入用户名" />
					<input type="password" name="password" id="pwd" value="" placeholder="请输入密码" />
					<input type="submit" class="button" value="登    录" />
				</form>
			</div>
		</div>
		<div class="footer">
			联系电话: 400-706-1880 &nbsp 技术支持QQ: 1075518049<br>
			开发商：华清远见济南研发中心 <a href="http://www.farsight.com.cn" target="_blank">华清远见官网</a>
		</div>
	</body>
</html>